<template>
    <div class="white-box">
        <div class="detail-one">
            <detail-item title="版本ID" :value="objs.version_id" />
            <detail-item title="版本名称" :value="objs.title" />
            <detail-item title="版本价格" :value="objs.version_price" />
            <detail-item title="版本号" :value="objs.version" />
            <detail-item title="版本备注" :value="objs.intro" />
            <detail-item title="添加时间" :value="objs.version_price" />
            <div class="item-more">
                <div class="item-more__left">选择权限</div>
                <div class="item-more__right">
                    <el-tag v-for="item in module_list" :key="item">{{ item.title }}</el-tag>
                </div>
            </div>
            <div class="item-more">
                <div class="item-more__left">组件配置</div>
                <div class="item-more__right">
                    <el-tag v-for="item in tool_list" :key="item">{{ item.title }}</el-tag>
                </div>
            </div>
        </div>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const { proxy } = getCurrentInstance()
const route = useRoute();

let id = route.query.id
onMounted(() => {
    if (id) {
        getDetail()
    }
})

const objs = ref({})
const module_list = ref([])
const tool_list = ref([])
function getDetail() {
    proxy.$axios
        .get("version/update", {
            params: {
                version_id: id
            }
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value = result.version
                module_list.value = result.module_list
                tool_list.value = result.tool_list
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => { })
}
</script>
<script>
export default {
    name: "ConfigEditionDetail",
}
</script>

<style lang="less" scoped>
.item-more {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin: @margin-mdl 0px;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
    padding: @padding-md 0 4px;
    border-radius: @radius-xs;

    .item-more__left {
        flex: none;
        font-size: 14px;
        width: 120px;
        text-align: right;
        margin-right: 14px;
        color: @gray-7
    }

    .item-more__right {
        flex: 1;
        display: flex;
        flex-flow: row wrap;

        .el-tag {
            margin-right: @margin-md;
            margin-bottom: @margin-md;
        }
    }
}
</style>